<template>
	<!-- 个人报表 -->
	<div class="container" style="">
		<van-nav-bar title="客服列表" left-arrow @click-left="$router.back()" fixed> </van-nav-bar>
		<div class="flex-scroll">
			<el-table
				ref="tableRef"
				v-loading="tableLoading"
				height="100%"
				stripe
				:data="tableData"
			>
				<template v-for="(colums, index) in tableColums">
					<el-table-column
						:type="colums.type"
						:fixed="colums.fixed"
						:width="colums.width"
						:minWidth="colums.minWidth"
						:formatter="colums.formatter"
						:prop="colums.prop"
						:label="colums.label"
						:showOverflowTooltip="colums.showOverflowTooltip"
						:sortable="colums.sortable"
					>
					</el-table-column>
				</template>
				<el-table-column label="操作" fixed="right" width="100">
					<template #default="{ row }">
						<div
							style="display: flex;flex-direction: column;align-items: center;height: auto;"
						>
							<van-switch
								size="25px"
								v-model="row.status"
								:active-value="1"
								:inactive-value="0"
								@input="changeTan(row)"
							/>
							<van-button
								style="margin-top: 15px;"
								size="small"
								type="danger"
								@click="remove(row)"
								>移除</van-button
							>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import { Dialog } from "vant";
import { Table, TableColumn } from "element-ui";
import dayjs from "dayjs";
export default {
	components: {
		ElTable: Table,
		ElTableColumn: TableColumn
	},
	data() {
		return {
			tableData: [],
			tableColums: [
				{
					label: "姓名",
					prop: "user_name",
					width: 100,
					align: "left"
				},
				{ label: "微信昵称", prop: "wxk_user_alias", width: 180 },
				{
					label: "今日加粉数",
					prop: "today_wechat",
					sortable: true,
					width: 180
				},

				{ label: "今日定金率", prop: "today_deposit_ratio", width: 180 },
				{ label: "当月加粉数", prop: "month_wechat", width: 180, sortable: true },
				{ label: "当月定金率", prop: "month_deposit_ratio", width: 180 },
				{ label: "当月加微到店率", prop: "month_arrive_wechat_ratio", width: 180 },
				{ label: "状态", prop: "status_name", width: 100 }
			],
			tableLoading: true,
			search: {},
			removeItem: {}
		};
	},
	created() {
		this.search = this.$route.query;
		this.getList();
	},
	mounted() {},
	methods: {
		async getList() {
			this.tableLoading = true;
			const res = await this.$service.wx.userList({
				id: this.search.id
			});
			this.tableData = res;
			console.log(res, "res");

			this.$nextTick(() => {
				// 强刷页面
				this.$refs.tableRef.doLayout();
				this.tableLoading = false;
			});
		},
		async changeTan(row) {
			const { pu_id, status } = row;
			console.log(status, "status");
			const { id } = this.search;
			let res;
			try {
				if (status == 0) {
					const res = await this.$service.wx.userTurnOff({
						pu_id,
						pool_id: id
					});
				} else {
					const res = await this.$service.wx.userTurnOn({
						pu_id,
						pool_id: id
					});
				}
				this.$message.success("修改成功");
			} catch (err) {
				console.log("跑这里错误");
				this.$message.error(err);
				row.status = status == 1 ? 0 : 1;
			}
		},
		remove(row) {
			this.removeItem = this.$TOOL.objCopy(row);
			Dialog.confirm({
				message: "确定是否移除客服？",
				beforeClose: this.bereforeClose
			}).then(async () => {
				let params = {
					pu_id: this.removeItem.pu_id,
					pool_id: this.search.id
				};
				await this.$service.wx.remove(params);
				this.$message.success("操作成功");
				this.getList();
			});
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 46px;
	font-size: 14px;
}
.flex-scroll {
	height: calc(100% - 46px);
	overflow-y: auto;
}
</style>
